<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/elementUI.css">
    <script src="../js/vue.js"></script>
    <script src="../js/axios.js"></script>
    <script src="../js/elementUI.js"></script>

</head>
<body>
<div id="app">

    <el-input v-model="query.name" placeholder="请输入公司名称" clearable style="width: 200px;"></el-input>
    <el-button type="primary" @click="handleAdd">添加</el-button>
    <el-button type="danger" @click="handleDelAll">批量删除</el-button>
    <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange">
        <el-table-column
                type="selection"
                width="55">
        </el-table-column>

        <el-table-column
                prop="id"
                label="合同ID">
        </el-table-column>

        <el-table-column
                prop="name"
                label="合同名称">
        </el-table-column>

        <el-table-column
                prop="jgs"
                label="甲方公司名称">
        </el-table-column>

        <el-table-column
                prop="jlx"
                label="甲方联系方式">
        </el-table-column>

        <el-table-column
                prop="ygs"
                label="乙方公司名称">
        </el-table-column>

        <el-table-column
                prop="ylx"
                label="乙方联系方式">
        </el-table-column>

        <el-table-column
                prop="je"
                label="合同总金额">
        </el-table-column>

        <el-table-column
                prop="state"
                label="状态"
                show-overflow-tooltip>
            <template slot-scope="scope">
                <span>{{scope.row.state==0?"未提交"}}</span>
                <span>{{scope.row.state==1?"待审核"}}</span>
                <span>{{scope.row.state==2?"通过"}}</span>
                <span>{{scope.row.state==3?"未通过"}}</span>
            </template>
        </el-table-column>

        <el-table-column
                prop="createTime"
                label="签订时间"
                show-overflow-tooltip>
        </el-table-column>


        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        @click="handleEdit(scope.row)">编辑
                </el-button>
                <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelOne(scope.row)">删除
                </el-button>
            </template>
        </el-table-column>

    </el-table>

    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="query.page"
            :page-sizes="[2, 4, 6,10]"
            :page-size="query.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>


    <el-dialog :title="mode.title+'信息'" :visible.sync="dialogFormVisible" top="10px" :before-close="beforeCloseDialog">
        <el-form :model="form">
            <el-form-item label="合同名称" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="甲方公司名称" :label-width="formLabelWidth">
                <el-input v-model="form.jgs" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="甲方联系方式" :label-width="formLabelWidth">
                <el-input type="number" v-model="form.jlx" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="乙方公司名称" :label-width="formLabelWidth">
                <el-input v-model="form.ygs" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="乙方联系方式" :label-width="formLabelWidth">
                <el-input type="number" v-model="form.ylx" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="合同总金额" :label-width="formLabelWidth">
                <el-input type="number" v-model="form.je" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="状态" :label-width="formLabelWidth">
                <template>
                    <el-radio :disabled="zhuangtai"  v-model="form.state" :label="0">未提交</el-radio>
                    <el-radio :disabled="zhuangtai"  v-model="form.state" :label="1">待审核</el-radio>
                    <el-radio :disabled="zhuangtai"  v-model="form.state" :label="2">通过</el-radio>
                    <el-radio :disabled="zhuangtai"  v-model="form.state" :label="3">未通过</el-radio>
                </template>
            </el-form-item>
            <el-form-item label="创建时间" :label-width="formLabelWidth">
                <el-date-picker
                        v-model="form.createTime"
                        type="date"
                        placeholder="签订时间">
                </el-date-picker>
                <!--<el-input v-model="" autocomplete="off"></el-input>-->
            </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="addCarry">确 定</el-button>
        </div>
    </el-dialog>

</div>

</body>
<script>
    new Vue({
        el: "#app",
        data: {
            mode: {
                title: "",
                url: ""
            },
            formLabelWidth: "120px",
            query: {
                name:"",
                page: 1,
                size: 2
            },
            total: 0,
            form: {
                name:"",
                jgs:"",
                jlx:"",
                ygs:"",
                ylx:"",
                je:"",
                createTime: "",
                state:true,
            },
            tableData: [],
            multipleSelection: [],
            //单选按钮默认为没有禁用
            zhuangtai:false,
            dialogFormVisible: false
        },
        watch: {
            query: {
                deep: true,
                handler() {
                    this.initData()
                }
            }
        },
        methods: {
            //展示所有加分页，模糊查询条件
            initData() {
                axios.post("/ht/findPage.do",this.query).then(res => {
                    this.tableData = res.data.rows;
                    this.total = res.data.total;
                    if (this.tableData.length == 0 && this.query.page > 1) {
                        this.query.page--
                    }
                })

            },

            //删除的执行请求方法
            delCarry(ids) {
                axios.get(`/ht/deleteAll.do?ids=${ids}`).then(res => {
                    if (res.data.code==0){
                        this.$message({
                            type: 'success',
                            message: res.data.message
                        });
                        this.initData()
                    } else if (res.data.code==1){
                        this.$message({
                            type: 'error',
                            message: '无操作权限或操作失败!'
                        });
                    }
                })

            },
            //添加修改的执行方法
            addCarry() {
                axios.post(this.mode.url, this.form).then(res => {
                   if (res.data.code==0){
                       this.$message({
                           type: 'success',
                           message: res.data.message
                       });
                       this.initFormData();
                       this.initData()
                   } else if (res.data.code==1){
                       this.$message({
                           type: 'error',
                           message: '无操作权限或操作失败!'
                       });
                   }
                })
            },
            //修改
            handleEdit(row) {
                this.form = JSON.parse(JSON.stringify(row));//普通输入框的回显
                this.mode = {
                    title: "修改",
                    url: "/ht/update.do"
                }
                //按钮修改要求禁用
                this.zhuangtai=true;
                this.dialogFormVisible = true;
            },
            //添加
            handleAdd() {
                this.mode = {
                    title: "添加",
                    url: "/ht/add.do"
                }
                this.form= {
                    state:2
                    ,}
                //按钮添加不能禁用
                this.zhuangtai=false;
                this.dialogFormVisible = true;
            },




            //表单置空
            initFormData() {
                this.form = {
                    name:"",
                    jgs:"",
                    jlx:"",
                    ygs:"",
                    ylx:"",
                    je:"",
                    createTime: "",
                    state:true,
                }
                this.dialogFormVisible = false;

            },
            beforeCloseDialog(close) {
                this.initFormData();
                close()//关闭弹窗的方法
            },
            //批量删除
            handleDelAll() {
                if (this.multipleSelection.length > 0) {
                    this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.delCarry(this.multipleSelection.map(m => m.id).join(","));
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
                } else {
                    this.$message('请选择一条数据');
                }
            },
            //单个删除
            handleDelOne(row) {
                this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.delCarry(row.id);
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //页码跳转和每页展示几条
            handleSizeChange(val) {
                this.query.size = val
            },
            handleCurrentChange(val) {
                this.query.page = val
            },
            //全选的数据
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
        },
        created() {
            this.initData();
            this.initMxData();
        }
    })
</script>
</html>